<template>
	<view class="checkin-container">
		<!-- 顶部背景 -->
		<view class="top-bg">
			<image class="bg-image"
				src="https://n.sinaimg.cn/sinacn10114/684/w2048h1036/20190811/b94d-icapxph1456236.jpg"
				mode="aspectFill"></image>
			<view class="bg-mask"></view>
			<view class="top-content">
				<text class="page-title">禅修打卡</text>
				<text class="page-subtitle">日精进，月有得，年有成</text>
			</view>
		</view>

		<!-- 打卡状态卡片 -->
		<view class="checkin-card">
			<view class="card-header">
				<text class="header-title">今日打卡</text>
				<text class="header-date">{{ formattedDate }}</text>
			</view>
			<!-- 未打卡状态 -->
			<view class="checkin-status" v-if="!todayChecked">
				<view class="status-icon">
					<image src="/static/icons/unchecked.png"></image>
				</view>
				<text class="status-text">今日尚未打卡</text>
				<view class="checkin-btn" @tap="openCheckInModal">立即打卡</view>
			</view>
			<!-- 已打卡状态 -->
			<view class="checkin-status checked" v-else>
				<view class="status-icon">
					<image src="/static/icons/checked.png"></image>
				</view>
				<text class="status-text">今日已打卡</text>
				<text class="checkin-time">{{
          checkInActivities[0]?.create_time
        }}</text>
			</view>

			<!-- 连续打卡信息 -->
			<view class="streak-info">
				<view class="streak-days">
					<text class="days-num">{{ streakDays }}</text>
					<text class="days-label">连续打卡天数</text>
				</view>
				<view class="streak-divider"></view>
				<view class="streak-points">
					<text class="points-num">+{{ signPoints }}</text>
					<text class="points-label">打卡获得积分</text>
				</view>
			</view>
		</view>

		<!-- 积分奖励规则 -->
		<!-- <view class="rewards-card">
      <view class="card-header">
        <text class="header-title">积分奖励池</text>
        <text class="view-all" @tap="showPointsRules">规则说明</text>
      </view>

      <view class="rewards-list">
        <view
          v-for="(reward, index) in rewardRules"
          :key="index"
          class="reward-item"
          :class="{
            active: streakDays >= reward.days,
            next: streakDays + 1 === reward.days,
          }"
        >
          <view class="reward-days">
            <text>{{ reward.days }}天</text>
          </view>
          <view class="reward-bar">
            <view class="bar-bg"></view>
            <view
              class="bar-progress"
              :style="{ width: calculateRewardProgress(reward.days) + '%' }"
            ></view>
          </view>
          <view class="reward-points">
            <image class="point-icon" src="/static/icons/point.png"></image>
            <text>{{ reward.points }}</text>
          </view>
        </view>
      </view>
    </view> -->

		<!-- 打卡日历 -->
		<view class="calendar-card">
			<uni-calendar :selected="checkInDates"></uni-calendar>
		</view>

		<!-- 打卡动态 -->
		<view class="activity-card">
			<view class="card-header">
				<text class="header-title">打卡动态</text>
				<text class="view-all" @tap="navigateToActivity">查看全部</text>
			</view>

			<view class="activity-list">
				<view v-for="(activity, index) in checkInActivities" :key="index" class="activity-item">
					<view class="activity-user">
						<image class="user-avatar" :src="activity.user.avatarUrl"></image>
						<view class="user-info">
							<text class="user-name">{{ activity.user.nickName }}</text>
							<text class="activity-time">{{ activity.create_time }}</text>
						</view>
					</view>
					<text class="activity-content">{{ activity.context }}</text>
					<!-- 修改后的图片显示部分 -->
					<view class="activity-images" v-if="activity.imgs && activity.imgs.length > 0">
						<view :class="getImageContainerClass(activity.imgs.length)"
							v-for="(image, imgIndex) in activity.imgs" :key="imgIndex"
							@tap="previewImages(activity.imgs, imgIndex)">
							<image :src="image" mode="aspectFill"></image>
						</view>
					</view>

					<!-- 优化后的位置显示 -->
					<view class="activity-location" v-if="activity.address_name">
						<view class="location-icon">
							<uni-icons type="location" size="16" color="#78a77f"></uni-icons>
						</view>
						<text class="location-address"> {{ activity.address_name }}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 打卡弹窗 -->
		<view class="checkin-modal" v-if="showCheckInModal">
			<view class="modal-mask" @tap="closeCheckInModal"></view>
			<view class="modal-content">
				<view class="modal-header">
					<text class="modal-title">今日打卡</text>
					<view class="modal-close" @tap="closeCheckInModal">×</view>
				</view>

				<view class="modal-body">
					<view class="checkin-form">
						<view class="form-item">
							<textarea class="form-textarea" placeholder="分享今日禅修体验和感悟..." v-model="checkInContent"
								maxlength="200"></textarea>
							<text class="textarea-counter">{{ checkInContent.length }}/200</text>
						</view>

						<view class="form-item">
							<!-- 修复后的图片上传区域 -->
							<view class="image-upload" @tap="chooseImage" v-if="!checkInImages.length">
								<!-- 使用图标文本代替uni-icons -->
								<text class="icon-text">+</text>
								<text class="upload-text">上传图片 (最多6张)</text>
							</view>
							<view class="image-preview-grid" v-else>
								<view class="image-preview-item" v-for="(img, index) in checkInImages" :key="index">
									<image class="preview-image" :src="img" mode="aspectFill"
										@tap="previewUploadImages(index)"></image>
									<view class="delete-image" @tap="deleteImage(index)">×</view>
								</view>
								<view class="add-more-image" v-if="checkInImages.length < maxImages"
									@tap="chooseMoreImages">
									<text class="plus-icon">+</text>
								</view>
							</view>
						</view>

						<!-- 添加位置分享选项 -->
						<view class="form-item">
							<view class="location-wrapper">
								<view class="location-header">
									<text class="location-title">打卡位置</text>
									<switch :checked="shareLocation" @change="toggleLocationShare" color="#78a77f"
										class="location-switch" />
								</view>
								<view class="location-content" v-if="shareLocation">
									<view class="location-info" v-if="address_name">
										<view class="location-icon">
											<!-- 使用uniapp图标 -->
											<uni-icons type="location" size="23" color="#78a77f"></uni-icons>
										</view>
										<text class="location-text">{{ address_name }}</text>
									</view>
									<text class="location-text location-loading" v-else>定位中...</text>

									<!-- 添加选择位置按钮 -->
									<view class="choose-location-btn" @tap="chooseUserLocation">
										{{ address_name ? "重新选择位置" : "选择位置" }}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="modal-footer">
					<button class="submit-btn" :class="{ disabled: !checkInImages.length }"
						:disabled="!checkInImages.length" @tap="submitCheckIn">
						提交打卡
					</button>
				</view>
			</view>
		</view>

		<!-- 积分规则弹窗 -->
		<!-- <view class="rules-modal" v-if="showRulesModal">
      <view class="modal-mask" @tap="hidePointsRules"></view>
      <view class="modal-content">
        <view class="modal-header">
          <text class="modal-title">积分奖励规则</text>
          <view class="modal-close" @tap="hidePointsRules">×</view>
        </view>

        <view class="modal-body">
          <view class="rules-content">
            <view class="rule-section">
              <text class="rule-title">基础积分</text>
              <text class="rule-desc">每日首次打卡可获得10积分</text>
            </view>

            <view class="rule-section">
              <text class="rule-title">连续打卡奖励</text>
              <view class="rule-desc">
                <text>• 连续打卡3天：每日获得15积分</text>
                <text>• 连续打卡7天：每日获得25积分</text>
                <text>• 连续打卡15天：每日获得40积分</text>
                <text>• 连续打卡30天：每日获得60积分</text>
                <text>• 连续打卡50天：每日获得100积分</text>
              </view>
            </view>

            <view class="rule-section">
              <text class="rule-title">额外奖励</text>
              <view class="rule-desc">
                <text>• 上传图片额外奖励5积分</text>
                <text>• 月度全勤额外奖励200积分</text>
                <text>• 分享到朋友圈额外奖励10积分（每日1次）</text>
              </view>
            </view>

            <view class="rule-section">
              <text class="rule-title">积分用途</text>
              <view class="rule-desc">
                <text>• 积分可在商城内使用，抵扣商品金额</text>
                <text>• 积分可兑换专属虚拟礼品和限定优惠券</text>
                <text>• 积分达到一定数量可提升会员等级</text>
              </view>
            </view>
          </view>
        </view>

        <view class="modal-footer">
          <button class="rules-btn" @tap="hidePointsRules">我知道了</button>
        </view>
      </view>
    </view> -->
	</view>
</template>

<script>
	import {
		regeo,
		uploadImg,
		uploadImages
	} from "../../api/public";
	import {
		getSignApi,
		getSignListApi,
		getSignPointsApi,
		signApi,
	} from "../../api/user";
	import uniCalendar from "../../uni_modules/uni-calendar/components/uni-calendar/uni-calendar.vue";
	import {
		tip
	} from "../../utils";
	export default {
		components: {
			uniCalendar
		},
		data() {
			return {
				todayChecked: false, // 今日是否已打卡
				todayCheckInTime: "", // 今日打卡时间
				streakDays: 0, // 连续打卡天数
				signPoints: 0, // 获得积分
				showCheckInModal: false, // 打卡弹窗显示状态
				showRulesModal: false, // 规则弹窗显示状态
				checkInContent: "", // 打卡内容
				checkInImages: [], // 打卡图片数组，支持多张图片
				maxImages: 6, // 最多上传图片数量
				latitude: "",
				longitude: "",
				address_name: "",
				shareLocation: true, // 是否分享位置
				// 日历相关
				currentDate: new Date(),
				currentMonth: new Date().getMonth(),
				currentYear: new Date().getFullYear(),
				weekdays: ["日", "一", "二", "三", "四", "五", "六"],

				// 打卡动态
				checkInActivities: [],
			};
		},
		onLoad() {
			this.init();
			this.getLocation();
		},
		computed: {
			// 格式化当前日期
			formattedDate() {
				const date = new Date();
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, "0");
				const day = String(date.getDate()).padStart(2, "0");
				const weekday = this.weekdays[date.getDay()];

				return `${year}年${month}月${day}日 星期${weekday}`;
			},

			// 当前年月
			currentYearMonth() {
				return `${this.currentYear}年${this.currentMonth + 1}月`;
			},
			checkInDates() {
				return this.checkInActivities.map((item) => {
					return {
						date: item.sign_date,
						info: "已打卡",
					};
				});
			},
		},
		mounted() {
			this.checkTodayStatus(); // 检查今日是否已打卡
			setTimeout(() => { // 添加图片格式检查
				this.checkImageFormat();
			}, 2000);
		},
		methods: {
			getLocation() {
				wx.getLocation({ // 获取当前位置  // 微信
					type: "gcj02", // 返回可用于wx.openLocation的坐标
					success: (res) => {
						this.latitude = res.latitude;
						this.longitude = res.longitude;
						const locationParam = `${res.longitude},${res.latitude}`;
						console.log("请求地理位置信息，参数:", locationParam);
						regeo({
								location: locationParam,
							})
							.then((result) => {
								console.log("反地理编码成功:", result);
								if (result && result.address_name) {
									this.address_name = result.address_name;
								} else {
									console.warn("地址信息不完整");
									this.address_name = "未知地点";
								}
							})
							.catch((err) => {
								console.error("反地理编码失败:", err);
								this.address_name = "获取地址失败";
							});
					},
					fail: (err) => {
						console.error("获取位置失败:", err);
					},
				});
			},
			init() {
				getSignApi().then((res) => {
					this.todayChecked = res.list.is_sign == 1;
					this.streakDays = res.list.continue;
				});
				getSignPointsApi().then((res) => {
					this.signPoints = res.points;
				});
				getSignListApi({
					self: 1,
					page_size: 10,
				}).then((res) => {
					console.log('获取打卡动态:', res);
					// 处理每个动态的图片数据，确保它是数组格式
					if (res.data && res.data.length > 0) {
						res.data.forEach(item => {
							if (item.imgs) {// 检查 imgs 是否存在
								if (typeof item.imgs === 'string') {
									item.imgs = item.imgs.split(',').filter(url => url.trim() !== '');
								} else if (!Array.isArray(item.imgs)) {
									// 如果不是数组也不是字符串，初始化为空数组
									item.imgs = [];
								}
							} else {
								// 如果 imgs 不存在，初始化为空数组
								item.imgs = [];
							}
							console.log(`动态 ${item.id || '未知ID'} 的图片:`, item.imgs);
						});
					}

					this.checkInActivities = res.data;
					// 检查图片字段
					if (this.checkInActivities && this.checkInActivities.length > 0) {
						console.log("第一条动态图片:", this.checkInActivities[0].imgs);
					}
				});
			},
			// 检查今日打卡状态
			checkTodayStatus() {},

			// 计算今日可获得积分
			calculateTodayPoints() {
				let points = 10; // 基础积分

				// 根据连续打卡天数计算奖励
				for (let i = this.rewardRules.length - 1; i >= 0; i--) {
					if (this.streakDays >= this.rewardRules[i].days) {
						points = this.rewardRules[i].points;
						break;
					}
				}

				// 加上图片上传奖励
				if (this.checkInImages.length > 0) {
					points += 5 * this.checkInImages.length;
				}

				this.todayPoints = points;
			},

			// 计算奖励进度条
			calculateRewardProgress(rewardDays) {
				if (this.streakDays >= rewardDays) {
					return 100;
				}

				// 找到前一个奖励节点
				let prevReward = 0;
				for (let i = 0; i < this.rewardRules.length; i++) {
					if (
						this.rewardRules[i].days < rewardDays &&
						this.streakDays >= this.rewardRules[i].days
					) {
						prevReward = this.rewardRules[i].days;
					}
				}

				// 计算当前进度百分比
				const totalDays = rewardDays - prevReward;
				const currentDays = this.streakDays - prevReward;
				const progress = (currentDays / totalDays) * 100;

				return Math.max(0, Math.min(progress, 100));
			},

			// 判断是否为今天
			isToday(year, month, day) {
				const today = new Date();
				return (
					today.getFullYear() === year &&
					today.getMonth() === month &&
					today.getDate() === day
				);
			},

			// 判断日期是否禁用（未来日期或过去一个月以上）
			isDateDisabled(year, month, day) {
				const today = new Date();
				const date = new Date(year, month, day);

				// 未来日期禁用
				if (date > today) {
					return true;
				}

				// 过去一个月以上的日期禁用
				const oneMonthAgo = new Date();
				oneMonthAgo.setMonth(oneMonthAgo.getMonth() - 1);
				return date < oneMonthAgo;
			},

			// 上一个月
			prevMonth() {
				if (this.currentMonth === 0) {
					this.currentYear--;
					this.currentMonth = 11;
				} else {
					this.currentMonth--;
				}
			},

			// 下一个月
			nextMonth() {
				const today = new Date();
				const nextMonth = new Date(this.currentYear, this.currentMonth + 1, 1);

				// 不能查看未来月份
				if (nextMonth > today) {
					return;
				}

				if (this.currentMonth === 11) {
					this.currentYear++;
					this.currentMonth = 0;
				} else {
					this.currentMonth++;
				}
			},

			// 打开打卡弹窗
			openCheckInModal() {
				if (this.todayChecked) {
					uni.showToast({
						title: "今日已打卡",
						icon: "none",
					});
					return;
				}

				this.showCheckInModal = true;
			},

			// 关闭打卡弹窗
			closeCheckInModal() {
				this.showCheckInModal = false;
				// 清空数据
				this.checkInContent = "";
				this.checkInImages = [];
			},

			// 选择图片 - 允许从相册和相机选择
			chooseImage() {
				uni.chooseImage({
					count: this.maxImages, // 最多可选择的图片张数
					sizeType: ["compressed"], // 压缩后的图片
					sourceType: ["album", "camera"], // 允许从相册选择和相机拍摄
					success: (res) => {
						this.checkInImages = res.tempFilePaths;
					},
					fail: (err) => {
						console.error('选择图片失败:', err);
						uni.showToast({
							title: '选择图片失败',
							icon: 'none',
							duration: 2000
						});
					}
				});
			},

			// 删除已选图片
			deleteImage(index) {
				this.checkInImages.splice(index, 1);
				// 重新计算积分
				//this.calculateTodayPoints();
			},

			// 切换位置分享开关
			toggleLocationShare(e) {
				// 提示用户
				this.shareLocation = e.detail.value;
				if (this.shareLocation && !this.address_name) {
					this.getLocation();
				}
			},

			// 预览已上传的图片
			previewUploadImages(index) {
				uni.previewImage({
					current: index,
					urls: this.checkInImages,
				});
			},

			// 提交打卡 - 修复了结构问题
			submitCheckIn() {
				if (!this.checkInContent.trim()) {
					uni.showToast({
						title: "请输入打卡内容",
						icon: "none",
					});
					return;
				}
				
				if (this.checkInImages.length === 0) {
					uni.showToast({
						title: "请上传打卡图片",
						icon: "none",
					});
					return;
				}

				// 显示加载中
				uni.showLoading({
					title: "准备上传...",
				});

				// 使用依次上传的方法
				this.uploadImagesSequentially()
					.then(uploadedUrls => {
						console.log('上传成功的图片URLs:', uploadedUrls);
						
						// 构建提交参数
						const params = {
							context: this.checkInContent,
							imgs: uploadedUrls.join(',') // 将多个图片URL用逗号连接
						};

						// 如果分享位置且有位置信息，则添加位置参数
						if (this.shareLocation && this.latitude && this.longitude) {
							params.latitude = this.latitude;
							params.longitude = this.longitude;
							params.address_name = this.address_name;
						}

						uni.showLoading({
							title: "提交中...",
						});

						return signApi(params);
					})
					.then(res => {
						uni.hideLoading();

						// 成功后立即刷新数据
						this.init();

						// 关闭弹窗
						this.closeCheckInModal();
						uni.showToast({
							title: "打卡成功",
							icon: "success",
						});
					})
					.catch(err => {
						console.error('打卡失败:', err);
						uni.hideLoading();
						tip(err);
					});
			},

			// 显示积分规则
			showPointsRules() {
				this.showRulesModal = true;
			},

			// 隐藏积分规则
			hidePointsRules() {
				this.showRulesModal = false;
			},

			// 导航到全部动态页面
			navigateToActivity() {
				uni.navigateTo({
					url: "/pages/my/dynamic",
				});
			},

			// 获取图片容器类名
			getImageContainerClass(count) {
				if (count === 1) return "image-single";
				if (count === 2) return "image-double";
				if (count === 3) return "image-triple";
				return "image-grid"; // 4张以上使用网格布局
			},

			// 优化图片预览方法
			previewImages(images, current) {
				// 确保 images 是数组
				if (!Array.isArray(images)) {
					if (typeof images === 'string') {
						images = images.split(',').filter(url => url.trim() !== '');
					} else {
						console.error('预览图片失败: images 不是有效的数组或字符串', images);
						return;
					}
				}

				if (images.length === 0) {
					console.error('没有图片可以预览');
					return;
				}

				uni.previewImage({
					urls: images,
					current: images[current],
				});
			},

			// 点赞动态
			likeActivity(index) {
				const activity = this.checkInActivities[index];
				if (activity.liked) {
					activity.likes--;
				} else {
					activity.likes++;
				}
				activity.liked = !activity.liked;
			},

			// 评论动态
			commentActivity(index) {
				uni.navigateTo({
					url: `/pages/checkin/comment?id=${index}`,
				});
			},

			// 选择用户位置
			chooseUserLocation() {
				// 调用微信小程序的位置选择器
				wx.chooseLocation({
					success: (res) => {
						console.log("用户选择的位置:", res);
						// 如果用户成功选择了位置
						if (res.name && res.address) {
							// 更新位置信息
							this.latitude = res.latitude;
							this.longitude = res.longitude;

							// 使用微信小程序返回的详细地址信息
							const fullAddress = res.address || "";
							const poiName = res.name || "";

							// 组合完整地址
							this.address_name = fullAddress;
							if (poiName && !fullAddress.includes(poiName)) {
								this.address_name =
									poiName + (fullAddress ? " · " + fullAddress : "");
							}

							console.log("用户选择的完整地址:", this.address_name);
						}
					},
					fail: (err) => {
						console.error("选择位置失败:", err);
						uni.showToast({
							title: "选择位置失败，请重试",
							icon: "none",
							duration: 2000,
						});
					},
					complete: () => {
						console.log("位置选择完成");
					},
				});
			},

			// 选择更多图片 - 允许从相册和相机选择
			chooseMoreImages() {
				const remainCount = this.maxImages - this.checkInImages.length;
				if (remainCount <= 0) return;

				uni.chooseImage({
					count: remainCount,
					sizeType: ["compressed"],
					sourceType: ["album", "camera"], // 允许从相册选择和相机拍摄
					success: (res) => {
						// 合并新选择的图片
						this.checkInImages = [...this.checkInImages, ...res.tempFilePaths];
					},
					fail: (err) => {
						console.error('选择图片失败:', err);
						uni.showToast({
							title: '选择图片失败',
							icon: 'none',
							duration: 2000
						});
					}
				});
			},

			// 依次上传多张图片（优化版）
			async uploadImagesSequentially() {
				try {
					const uploadedUrls = [];
					// 显示上传进度
					uni.showLoading({
						title: `上传中 (0/${this.checkInImages.length})...`,
						mask: true,
					});

					// 逐个上传图片
					for (let i = 0; i < this.checkInImages.length; i++) {
						uni.showLoading({
							title: `上传中 (${i + 1}/${this.checkInImages.length})...`,
							mask: true,
						});

						try {
							// 使用 Promise 包装 uploadImg
							const result = await new Promise((resolve, reject) => {
								uploadImg(this.checkInImages[i])
									.then(res => {
										if (res && res.file_path) {
											resolve(res.file_path);
										} else {
											reject(new Error('上传返回的文件路径为空'));
										}
									})
									.catch(error => reject(error));
							});

							if (result) {
								uploadedUrls.push(result);
								console.log(`图片 ${i+1} 上传成功:`, result);
							}
						} catch (uploadError) {
							console.error(`图片 ${i+1} 上传失败:`, uploadError);
							// 继续上传下一张，而不是中断整个过程
						}
					}

					if (uploadedUrls.length === 0) {
						throw new Error('没有任何图片上传成功');
					}

					return uploadedUrls;
				} catch (error) {
					console.error('上传图片过程中发生错误:', error);
					throw error;
				} finally {
					uni.hideLoading();
				}
			},

			// 检查图片格式的辅助方法
			checkImageFormat() {
				console.log('===== 开始检查图片格式 =====');
				if (!this.checkInActivities || this.checkInActivities.length === 0) {
					console.log('没有动态数据可检查');
					return;
				}

				this.checkInActivities.forEach((activity, index) => {
					console.log(`动态 ${index + 1}:`, activity.id || '未知ID');
					console.log(`- 图片数据类型: ${typeof activity.imgs}`);

					if (typeof activity.imgs === 'string') {
						console.log(`- 原始字符串: "${activity.imgs}"`);
						const parsedImgs = activity.imgs.split(',').filter(url => url.trim() !== '');
						console.log(`- 解析后数组长度: ${parsedImgs.length}`);
						console.log(`- 解析后数组内容:`, parsedImgs);

						// 自动修复此条动态的图片数据
						activity.imgs = parsedImgs;
					} else if (Array.isArray(activity.imgs)) {
						console.log(`- 数组长度: ${activity.imgs.length}`);
						console.log(`- 数组内容:`, activity.imgs);
					} else {
						console.log(`- 无效的图片数据类型`);
					}
				});
				console.log('===== 图片格式检查完成 =====');
			},

			// 预览单张图片
			previewSingleImage(imgUrl) {
				uni.previewImage({
					urls: [imgUrl],
				});
			},
		},
	};
</script>

<style>
	.checkin-container {
		background-color: #f8f6f1;
		/* 米白色背景 */
		min-height: 100vh;
		padding-bottom: 30rpx;
		position: relative;
	}

	/* 顶部背景样式 */
	.top-bg {
		position: relative;
		height: 300rpx;
		overflow: hidden;
	}

	.bg-image {
		width: 100%;
		height: 100%;
		transform: scale(1.05);
		transition: all 0.8s;
	}

	.bg-mask {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.6));
	}

	.top-content {
		position: absolute;
		top: 50%;
		left: 0;
		right: 0;
		transform: translateY(-50%);
		text-align: center;
		z-index: 1;
	}

	.page-title {
		font-size: 48rpx;
		color: #ffffff;
		font-family: "汉仪尚巍手书", "思源宋体", sans-serif;
		margin-bottom: 20rpx;
		text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
		letter-spacing: 2rpx;
	}

	.page-subtitle {
		font-size: 28rpx;
		color: rgba(255, 255, 255, 0.9);
		letter-spacing: 1rpx;
	}

	/* 打卡状态卡片样式 */
	.checkin-card {
		margin: -60rpx 30rpx 30rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.15);
		position: relative;
		z-index: 10;
	}

	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
		background-color: rgba(244, 242, 237, 0.5);
	}

	.header-title {
		font-size: 32rpx;
		color: #4d3f33;
		font-family: "汉仪尚巍手书", "思源宋体", sans-serif;
		font-weight: 500;
	}

	.header-date {
		font-size: 24rpx;
		color: #a89b88;
	}

	.checkin-status {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 40rpx 0;
		background: linear-gradient(to bottom,
				rgba(244, 242, 237, 0.3),
				rgba(255, 255, 255, 0));
	}

	.status-icon {
		width: 120rpx;
		height: 120rpx;
		margin-bottom: 20rpx;
		filter: drop-shadow(0 2rpx 6rpx rgba(0, 0, 0, 0.1));
	}

	.status-icon image {
		width: 100%;
		height: 100%;
	}

	.status-text {
		font-size: 32rpx;
		color: #a89b88;
		margin-bottom: 20rpx;
	}

	.checkin-time {
		font-size: 24rpx;
		color: #78a77f;
		opacity: 0.9;
	}

	.checkin-btn {
		width: 240rpx;
		height: 80rpx;
		background: linear-gradient(to right, #78a77f, #8ab78f);
		color: #ffffff;
		font-size: 28rpx;
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 20rpx;
		box-shadow: 0 4rpx 10rpx rgba(120, 167, 127, 0.25);
		transition: all 0.3s;
	}

	.checkin-btn:active {
		transform: scale(0.98);
		box-shadow: 0 2rpx 5rpx rgba(120, 167, 127, 0.15);
	}

	.checkin-status.checked .status-text {
		color: #78a77f;
	}

	.streak-info {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 30rpx;
		border-top: 1rpx solid rgba(0, 0, 0, 0.05);
		background: linear-gradient(to right,
				rgba(230, 198, 117, 0.05),
				rgba(120, 167, 127, 0.05));
	}

	.streak-days,
	.streak-points {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 0 60rpx;
	}

	.days-num,
	.points-num {
		font-size: 40rpx;
		color: #8b5a2b;
		font-weight: bold;
		margin-bottom: 10rpx;
		text-shadow: 0 1rpx 2rpx rgba(139, 90, 43, 0.1);
	}

	.points-num {
		color: #e2c675;
	}

	.days-label,
	.points-label {
		font-size: 24rpx;
		color: #a89b88;
	}

	.streak-divider {
		width: 1rpx;
		height: 80rpx;
		background: linear-gradient(to bottom,
				rgba(0, 0, 0, 0.03),
				rgba(0, 0, 0, 0.1),
				rgba(0, 0, 0, 0.03));
	}

	/* 积分奖励规则样式 */
	.rewards-card {
		margin: 30rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
	}

	.view-all {
		font-size: 24rpx;
		color: #78a77f;
		position: relative;
		padding-right: 20rpx;
		transition: all 0.2s;
	}

	.view-all::after {
		content: "";
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 12rpx;
		height: 12rpx;
		border-top: 2rpx solid #78a77f;
		border-right: 2rpx solid #78a77f;
		transform: translateY(-50%) rotate(45deg);
	}

	.view-all:active {
		opacity: 0.8;
	}

	.rewards-list {
		padding: 20rpx 30rpx 30rpx;
	}

	.reward-item {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.reward-days {
		width: 80rpx;
		font-size: 26rpx;
		color: #75695c;
	}

	.reward-bar {
		flex: 1;
		height: 16rpx;
		margin: 0 20rpx;
		position: relative;
	}

	.bar-bg {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #eeeae0;
		border-radius: 8rpx;
	}

	.bar-progress {
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		background: linear-gradient(to right, #e2c675, #78a77f);
		border-radius: 8rpx;
		transition: width 0.5s;
	}

	.reward-points {
		display: flex;
		align-items: center;
		width: 80rpx;
	}

	.point-icon {
		width: 28rpx;
		height: 28rpx;
		margin-right: 6rpx;
	}

	.reward-points text {
		font-size: 26rpx;
		color: #75695c;
	}

	.reward-item.active .reward-days,
	.reward-item.active .reward-points text {
		color: #8b5a2b;
		/* 檀木棕 */
		font-weight: bold;
	}

	.reward-item.next .reward-days,
	.reward-item.next .reward-points text {
		color: #78a77f;
		/* 青瓷绿 */
	}

	/* 日历卡片样式 */
	.calendar-card {
		margin: 30rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
	}

	.month-selector {
		display: flex;
		align-items: center;
	}

	.month-arrow {
		width: 40rpx;
		height: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.month-arrow image {
		width: 24rpx;
		height: 24rpx;
	}

	.current-month {
		margin: 0 16rpx;
		font-size: 28rpx;
		color: #4d3f33;
	}

	.weekday-header {
		display: flex;
		padding: 20rpx 0;
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
	}

	.weekday {
		flex: 1;
		text-align: center;
		font-size: 24rpx;
		color: #a89b88;
	}

	.calendar-grid {
		display: flex;
		flex-wrap: wrap;
		padding: 10rpx 0 30rpx;
	}

	.calendar-day {
		width: 14.28%;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	.day-num {
		font-size: 28rpx;
		color: #4d3f33;
	}

	.calendar-day.empty .day-num {
		opacity: 0;
	}

	.calendar-day.checked {
		position: relative;
	}

	.check-mark {
		position: absolute;
		bottom: 8rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 20rpx;
		height: 20rpx;
	}

	.check-mark image {
		width: 100%;
		height: 100%;
	}

	.calendar-day.today .day-num {
		color: #ffffff;
	}

	.calendar-day.today::before {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 56rpx;
		height: 56rpx;
		border-radius: 28rpx;
		background-color: #78a77f;
		/* 青瓷绿 */
		z-index: -1;
	}

	.calendar-day.disabled .day-num {
		color: #d8d0c5;
	}

	/* 打卡动态样式 */
	.activity-card {
		margin: 30rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
	}

	.activity-list {
		padding: 0 30rpx;
	}

	.activity-item {
		padding: 30rpx 0;
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
	}

	.activity-item:last-child {
		border-bottom: none;
	}

	.activity-user {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.user-avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin-right: 16rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
		border: 2rpx solid rgba(255, 255, 255, 0.8);
	}

	.user-info {
		flex: 1;
	}

	.user-name {
		font-size: 28rpx;
		color: #4d3f33;
		margin-bottom: 6rpx;
		font-weight: 500;
	}

	.activity-time {
		font-size: 22rpx;
		color: #a89b88;
	}

	.activity-content {
		font-size: 28rpx;
		color: #4d3f33;
		line-height: 1.6;
		margin-bottom: 20rpx;
		padding: 0 10rpx;
	}

	.activity-images {
		display: flex;
		flex-wrap: wrap;
		margin: 0 -5rpx 15rpx;
	}

	.image-single {
		width: 100%;
		height: 360rpx;
		border-radius: 12rpx;
		overflow: hidden;
		margin: 5rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
	}

	.image-double {
		width: calc(50% - 10rpx);
		height: 240rpx;
		border-radius: 8rpx;
		overflow: hidden;
		margin: 5rpx;
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
	}

	.image-triple {
		width: calc(33.33% - 10rpx);
		height: 200rpx;
		border-radius: 8rpx;
		overflow: hidden;
		margin: 5rpx;
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
	}

	.image-grid {
		width: calc(33.33% - 10rpx);
		height: 200rpx;
		border-radius: 8rpx;
		overflow: hidden;
		margin: 5rpx;
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
	}

	.activity-images image {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	/* 优化位置信息样式 */
	.activity-location {
		display: flex;
		align-items: center;
		padding: 10rpx 16rpx;
		margin-bottom: 12rpx;
		background-color: rgba(120, 167, 127, 0.08);
		border-radius: 8rpx;
		border-left: 4rpx solid #78a77f;
	}

	.location-icon {
		margin-right: 10rpx;
		display: flex;
		align-items: center;
	}

	.location-address {
		font-size: 24rpx;
		color: #666;
		flex: 1;
		line-height: 1.4;
	}

	/* 打卡弹窗样式 */
	.checkin-modal,
	.rules-modal {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 999;
	}

	.modal-mask {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.6);
		backdrop-filter: blur(3px);
	}

	.modal-content {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #ffffff;
		border-radius: 30rpx 30rpx 0 0;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		max-height: 80vh;
		box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.15);
		animation: slideUp 0.3s ease-out;
	}

	@keyframes slideUp {
		from {
			transform: translateY(100%);
		}

		to {
			transform: translateY(0);
		}
	}

	.rules-modal .modal-content {
		max-height: 70vh;
		bottom: 15vh;
		left: 50rpx;
		right: 50rpx;
		border-radius: 20rpx;
		animation: zoomIn 0.3s ease-out;
	}

	@keyframes zoomIn {
		from {
			transform: scale(0.9);
			opacity: 0;
		}

		to {
			transform: scale(1);
			opacity: 1;
		}
	}

	.modal-header {
		position: relative;
		padding: 30rpx;
		text-align: center;
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
		background-color: rgba(244, 242, 237, 0.5);
	}

	.modal-title {
		font-size: 32rpx;
		color: #4d3f33;
		font-family: "汉仪尚巍手书", "思源宋体", sans-serif;
		font-weight: 500;
	}

	.modal-close {
		position: absolute;
		top: 30rpx;
		right: 30rpx;
		font-size: 40rpx;
		color: #a89b88;
		line-height: 1;
		transition: all 0.2s;
	}

	.modal-close:active {
		transform: scale(0.95);
		color: #78a77f;
	}

	.modal-body {
		flex: 1;
		overflow-y: auto;
	}

	.checkin-form {
		padding: 30rpx;
	}

	.form-item {
		margin-bottom: 30rpx;
	}

	.form-textarea {
		width: 100%;
		height: 200rpx;
		background-color: #f8f6f1;
		border-radius: 16rpx;
		padding: 20rpx;
		font-size: 28rpx;
		color: #4d3f33;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05) inset;
	}

	.textarea-counter {
		text-align: right;
		font-size: 24rpx;
		color: #a89b88;
		margin-top: 10rpx;
		padding-right: 10rpx;
	}

	/* 修复后的图片上传区域样式 */
	.image-upload {
		width: 100%;
		height: 200rpx;
		background-color: rgba(120, 167, 127, 0.1);
		border-radius: 16rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		border: 1rpx dashed rgba(120, 167, 127, 0.5);
		transition: all 0.3s;
	}

	.icon-text {
		font-size: 60rpx;
		color: #78a77f;
		font-weight: 200;
		line-height: 1;
		margin-bottom: 10rpx;
	}

	.upload-text {
		font-size: 28rpx;
		color: #78a77f;
		margin-top: 10rpx;
	}

	/* 修复后的图片预览网格样式 */
	.image-preview-grid {
		display: flex;
		flex-wrap: wrap;
		margin: -5rpx;
		width: 100%;
	}

	.image-preview-item {
		width: calc(33.33% - 10rpx);
		height: 180rpx;
		position: relative;
		margin: 5rpx;
		border-radius: 8rpx;
		overflow: hidden;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	}

	.preview-image {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.delete-image {
		position: absolute;
		top: 6rpx;
		right: 6rpx;
		width: 36rpx;
		height: 36rpx;
		background-color: rgba(0, 0, 0, 0.6);
		border-radius: 18rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #ffffff;
		font-size: 26rpx;
		z-index: 10;
	}

	.add-more-image {
		width: calc(33.33% - 10rpx);
		height: 180rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: rgba(120, 167, 127, 0.1);
		border-radius: 8rpx;
		border: 1rpx dashed rgba(120, 167, 127, 0.5);
		margin: 5rpx;
	}

	.plus-icon {
		font-size: 50rpx;
		color: #78a77f;
		font-weight: 200;
		line-height: 1;
	}

	.add-more-image:active {
		background-color: rgba(120, 167, 127, 0.2);
	}

	.submit-btn {
		width: 100%;
		height: 80rpx;
		background: linear-gradient(to right, #78a77f, #8ab78f);
		color: #ffffff;
		font-size: 28rpx;
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border: none;
		box-shadow: 0 4rpx 12rpx rgba(120, 167, 127, 0.3);
		transition: all 0.3s;
		position: relative;
		overflow: hidden;
	}

	.submit-btn:active {
		transform: scale(0.98);
		box-shadow: 0 2rpx 6rpx rgba(120, 167, 127, 0.2);
	}

	.submit-btn.disabled {
		background: linear-gradient(to right, #d8d0c5, #c9c1b6);
		color: rgba(255, 255, 255, 0.8);
		box-shadow: none;
	}

	.reward-preview {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20rpx;
		background-color: #fff9e6;
		border-radius: 16rpx;
	}

	.reward-icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
	}

	.reward-text {
		font-size: 28rpx;
		color: #e2c675;
		/* 佛经黄 */
	}

	.modal-footer {
		padding: 20rpx 30rpx 40rpx;
		border-top: 1rpx solid rgba(0, 0, 0, 0.05);
	}

	.rules-content {
		padding: 30rpx;
	}

	.rule-section {
		margin-bottom: 30rpx;
	}

	.rule-title {
		font-size: 28rpx;
		color: #4d3f33;
		font-weight: bold;
		margin-bottom: 16rpx;
	}

	.rule-desc {
		font-size: 26rpx;
		color: #75695c;
		line-height: 1.6;
		display: flex;
		flex-direction: column;
	}

	.rule-desc text {
		margin-bottom: 8rpx;
	}

	/* 位置分享样式 */
	.location-wrapper {
		background-color: #f8f6f1;
		border-radius: 16rpx;
		padding: 20rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05) inset;
	}

	.location-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 15rpx;
		padding-bottom: 10rpx;
		border-bottom: 1rpx solid rgba(120, 167, 127, 0.2);
	}

	.location-title {
		font-size: 28rpx;
		color: #4d3f33;
		font-weight: 500;
		display: flex;
		align-items: center;
	}

	.location-switch {
		transform: scale(0.8);
	}

	.location-content {
		display: flex;
		flex-direction: column;
		padding: 8rpx 0;
	}

	.location-info {
		display: flex;
		align-items: center;
		padding: 15rpx;
		background-color: rgba(120, 167, 127, 0.1);
		border-radius: 12rpx;
		margin-bottom: 15rpx;
		border: 1rpx solid rgba(120, 167, 127, 0.2);
	}

	.location-icon {
		margin-right: 12rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.location-text {
		font-size: 26rpx;
		color: #4d3f33;
		flex: 1;
		line-height: 1.4;
	}

	.location-loading {
		color: #a89b88;
		font-style: italic;
		text-align: center;
		padding: 20rpx 0;
	}

	/* 选择位置按钮样式 */
	.choose-location-btn {
		width: 100%;
		height: 68rpx;
		background: linear-gradient(to right, #78a77f, #8ab78f);
		color: #ffffff;
		font-size: 26rpx;
		border-radius: 34rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 10rpx;
		box-shadow: 0 4rpx 8rpx rgba(120, 167, 127, 0.2);
		transition: all 0.3s;
	}

	.choose-location-btn:active {
		transform: scale(0.98);
		box-shadow: 0 2rpx 4rpx rgba(120, 167, 127, 0.1);
	}
</style>